<template>
    <div class="titlebox"></div>
    <div class="supresulttitle"></div>
    <div class="noiseitembox">
      <div class="item" v-for="item in listArr" :key="item.name">
        <img class="img" :src="item.img" alt="">
        <div class="heng">
          <span class="span1">{{ item.name }}</span>
          <div class="right">
            <span class="span2 setColor">{{ item.number }}</span>件
          </div>
        </div>
      </div>
    </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
let listArr = ref([
  {name:'工业噪声', img: '/src/assets/fengjie/icon10.png', number:1742},
  {name:'建筑施工噪声', img: '/src/assets/fengjie/icon9.png', number:654},
  {name:'交通运输噪声', img: '/src/assets/fengjie/icon13.png', number:325},
  {name:'社会生活噪声', img: '/src/assets/fengjie/icon11.png', number:877},
  {name:'其他特殊类型噪声', img: '/src/assets/fengjie/icon12.png', number:369}
])
</script>

<style lang="less" scoped>
.titlebox {
    width: 100%;
    height: 44px;
    background-image: url("../../../assets/fengjie/icon7.png");
    background-size: 100% 100%;
}

.supresulttitle {
    width: 100%;
    height: 36px;
    margin-top: 9px;
    background-image: url("../../../assets/fengjie/icon8.png");
    background-size: 100% 100%;
}
.noiseitembox{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .item{
    display: flex;
    align-items: center;
    margin-top: 12px;
    .img{
      width: 32px;
      height: 32px;
    }
    .heng{
      width: 230px;
      height: 32px;
      background-image: url("../../../assets/fengjie/icon6.png");
      background-size: 100% 100%;
      margin-left: 4px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      padding: 0 16px 0 8px;
      .span1{
        font-family: PingFangSC-Regular;
        font-weight: 400;
        font-size: 12px;
        color: #FFFFFF;
      }
      .right{
        font-size: 12px;
        color: #ffffff;
        .span2{
          font-family: AlimamaShuHeiTi-Bold;
          font-size: 16px;
          font-weight: bold;
        }
      }
    }
  }
}
</style>
